<template>
  <!-- cabinet -->
  <view>
    <view class="content-view">
      <uni-card :border="false" v-for="(item,index) in list" :key="index">
        <view class="card" @click="details(item)" @longtap="longtaps(item)">
          <view class="titleTop">
            <view class="title">
              <view class="titleName">{{item.name}}</view>
            </view>
          </view>
          <view class="no">
            设备编号：{{item.code}}
          </view>
          <view class="adress">
            {{item.address}}
          </view>
        </view>
      </uni-card>
      <view v-show="isLoadMore && list.length >0">
        <uni-load-more :status="loadStatus"></uni-load-more>
      </view>

      <view class="nodata" v-if="list.length == 0">
        <image class="empty_img" src="/static/empty.png" mode="widthFix"></image>
        <view>没有你想要的内容</view>
      </view>
    </view>
  </view>
</template>

<script>

  import {
    collect
  } from '@/api/equip.js';
  import {
    mapState
  } from 'vuex';
  export default {
    data() {
      return {
        form: {
          pageNumber: 0,
          pageSize: 10,
          searchLat: '',
          searchLng: ''
        },
        list: [],
        more: '',
        hold: true,
        page: 0, //页码
        size: 10,
        loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
        isLoadMore: false, //是否加载中
        refresh: false, // 下拉刷新标示
      }
    },
    computed: {
      ...mapState(['coord'])
    },
    onLoad() {
      // let that = this;
      // uni.getLocation({
      //   type: 'wgs84',
      //   success: function(res) {
      //     that.form.searchLng = res.longitude;
      //     that.form.searchLat = res.latitude;
      //     that.getList();
      //   }
      // });
    },
    created() {
      this.getList();
    },
    // 刷新
    onPullDownRefresh() {
      this.page = 0;
      this.getList();
      this.refresh = true;
    },
    onReachBottom() {
      if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
        this.isLoadMore = true;
        this.page++;
        this.getList();
      }
    },
    methods: {
      getList() {
        this.$Toast.loading('加载中')
        collect('/selectFUserChargingCabinet', 'get', {
          pageNum: this.page,
          pageSize: this.size,
          lat: this.coord.lat,
          lng: this.coord.lng,
          chargingCabinetId: ''
        }).then(res => {
          uni.hideLoading();
          let datas = res.data.records;
          this.list = this.page == 0 ? datas : this.list.concat(datas);
          if (datas.length < this.size) { //小于size数，停止请求
            this.isLoadMore = true;
            this.loadStatus = 'nomore';
          } else {
            this.isLoadMore = false;
          }

          if (this.refresh) {
            uni.stopPullDownRefresh();
            this.refresh = false;
          }
        }).catch(error => {
          uni.hideLoading();
          this.isLoadMore = false;
        })
      },

      // 取消收藏
      longtaps(item) {
        let that = this;
        that.hold = false;
        uni.showModal({
          title: '提示',
          content: '是否确定取消收藏？',
          success: function(res) {
            if (res.confirm) {
              that.enshrine(item.id);
              that.hold = true;
            } else if (res.cancel) {
              that.hold = true;
            }
          }
        })
      },
      // 收藏
      enshrine(id) {
        this.$Toast.loading('操作中···')
        collect(`/insertFUserChargingCabinet?chargingCabinetId=${id}&type=delete`, 'post').then(res => {
            if (res.code == 200) {
              this.$Toast.none('取消收藏成功');
              this.page = 0;
              this.getList();
            }
          })
          .catch(err => {

          })
      },

      details(info) {
        if (this.hold) {
          uni.navigateTo({
            url: `../rechargeCabinet/rechargeCabinet?equipid=${info.id}&code=${info.code}&lat=${this.coord.lat}&lng=${this.coord.lng}`
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/static/css/main.scss';

  page {
    background-color: #f7f7f7;
  }

  .content-view {
    margin: 0 20rpx;
  }

  .card {
    padding: 30upx 0 15upx;
  }

  .titleTop {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      display: flex;
      align-items: center;

      .titleName {
        font-size: 34upx;
        font-weight: bold;
        color: #3a3a3a;
      }

      .titleGap {
        font-size: 26upx;
        color: #bdbdbd;
      }
    }

    .signalIcon {
      width: 27upx;
      height: 27upx;
      margin-left: 15upx;
    }

    .flyIcon {
      width: 24upx;
      height: 26upx;
      margin-right: 15upx;
    }
  }

  .no {
    font-size: 26upx;
    color: #858585;
    margin-top: 20upx;
  }

  .adress {
    width: 100%;
    font-size: 26upx;
    color: #858585;
    margin-top: 10upx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }

  .tips {
    display: flex;
    align-items: center;
    margin-top: 20upx;

    .free {
      display: flex;

      text {
        margin-left: 15upx;
        color: #3db023;
        font-size: 28upx;
      }
    }

    .collectionIcon {
      width: 37upx;
      height: 37upx;
    }

    .total {
      margin-left: 20upx;
      font-size: 28upx;
      color: #858585;
    }
  }
</style>
